<template>
  <div class="app-container">
    <el-tabs v-model="clientId" tab-position="right" style="height: 100%;" @tab-click="handleClick">
      <el-tab-pane v-for="client in clients" :lazy="true" :key="client.clientId" :label="client.clientName" :name="client.clientId">
        <treetable
          ref="menuEL"
          :client-id="client.clientId"
          :show-check-box="showCheckBox"
          :editable="editable"
          :permissions="permissions"
          :default-checked="defaultChecked"/>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { clientService } from '@/api/upms/client'
import { permissionService } from '@/api/upms/permission'
import treetable from '@/views/upms/menu/treeTable/index'

export default {
  name: 'TreeTableDemo',
  components: { treetable },
  data() {
    return {
      permissions: [],
      showCheckBox: false,
      editable: true,
      defaultChecked: { checkedpermissions: ['16', '19'], checkedrouters: ['2', '3'] },
      dynamicCheckedList: { checkedpermissions: [], checkedrouters: [] },
      clients: [],
      clientId: this.$store.getters.editClientId
    }
  },
  created() {
    clientService.list().then(res => {
      this.clients = res.data
      this.clientId = res.data[0].clientId
      this.handleClick({ name: this.clientId })
    })
  },
  methods: {
    getselected: function() {
      this.dynamicCheckedList = this.$refs.menuEL.dynamicCheckedList
    },
    handleClick: function(tab, event) {
      this.$store.dispatch('ChangeClientId', tab.name)
      permissionService.list({ clientId: tab.name }).then(res => {
        this.permissions = res.data
      })
    }
  }
}
</script>
